<template>
	<view class="content">
		<!-- <view class="title textCenter">立即自取(凭取货码)</view> -->
		
		<view class="rows">
			<image class="cover" :src="data.cover" mode=""></image>
			<view class="centerBox">
				<view class="name overflow_one">{{data.name}}</view>
				<view class="number">x {{data.num}}</view>
				<view class="clearBoth"></view>
				<view class="rule fontSize12">{{data.rule}}</view>
			</view>
			<view class="rightBox">
				<view class="price fontSemiBold">¥ {{data.price}}</view>
				<view class="priceBox">
					<view class="vipPrice fontSemiBold">¥ {{data.vipPrice}}</view>
					<image class="vipIcon" src="../static/icon_4.png" mode=""></image>
					<view class="clearBoth"></view>
				</view>
				<!-- <view class="names">消费立减{{data.less}}元</view> -->
			</view>
			<view class="clearBoth"></view>
			<view class="footerBox">
				<view class="footerPrice fontSemiBold">¥ {{data.allMoney}}</view>
				<view class="footerName">小计</view>
				<view class="clearBoth"></view>
			</view>
		</view>

		<view class="payBox">
			<view class="bg_grey"></view>
			<view class="bg_white">
				<view class="titleA">选择支付方式</view>
				<view class="rowsA" @tap="choosePayWay(2)">
					<image class="useIcon" src="/pages_kafei/pages/static/icon_money.png" mode=""></image>
					<view class="name fontSize15">钱包支付</view>
					<view class="names fontSize12">(余额￥{{data.wallet_price}})</view>
					<view  class="noneIcon" v-if="payWay == 0 || payWay == 1 "></view>
					<image class="thisOne" src="/pages_kafei/pages/static/icon_bingo.png" mode="" v-if="payWay == 2"></image>
					<view class="clearBoth"></view>
				</view>
				<view class="clearBoth"></view>
				<view class="rowsA" @tap="choosePayWay(1)">
					<image class="useIcon" src="/pages_kafei/pages/static/icon_wx.png" mode=""></image>
					<view class="name fontSize15">微信支付</view>
					<view  class="noneIcon" v-if="payWay == 0 || payWay == 2 "></view>
					<image class="thisOne" src="/pages_kafei/pages/static/icon_bingo.png" mode="" v-if="payWay == 1"></image>
					<view class="clearBoth"></view>
				</view>
			</view>
		</view>
		
		<view class="payBox">
			<view class="bg_grey"></view>
			<view class="bg_white">
				<view class="titleA">选择提取方式</view>
				<view class="rowsA" @tap="choosePayWays(1)">
					<view class="name fontSize15">立即取货</view>
					<view  class="noneIcon" v-if="payWays == 0 || payWays == 2 "></view>
					<image class="thisOne" src="/pages_kafei/pages/static/icon_bingo.png" mode="" v-if="payWays == 1"></image>
					<view class="clearBoth"></view>
				</view>
				<view class="clearBoth"></view>
				<view class="rowsA" @tap="choosePayWays(2)">
					<view class="name fontSize15">自提</view>
					<view  class="noneIcon" v-if="payWays == 0 || payWays == 1 "></view>
					<image class="thisOne" src="/pages_kafei/pages/static/icon_bingo.png" mode="" v-if="payWays == 2"></image>
					<view class="clearBoth"></view>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="name">应付总额</view>
			<view class="price fontSemiBold">¥{{data.allMoney}}</view>
			<view class="sureBtn" @tap="btnSure">去支付</view>
		</view>
		
		<jp-pwd ref="jpPwds"
			@completed="completed" 
			@inputPwd="inputPwd" 
			@forget="forget" 
			:money="pwd.money" 
			:payType="pwd.payType"
			:keyType="pwd.keyType" 
			:pawType="pwd.pawType" 
			:tite="pwd.tite" 
			:contents="pwd.contents" 
			:cancelType="pwd.cancelType"
			:keep="pwd.keep" 
			:msg="pwd.msg" 
			:places="pwd.places" 
			contentsColor="#555" 
			:isPwy="pwd.isPwy"
			titeColor="#333">
		</jp-pwd>
		
		
	</view>
</template>
<style>
	.content{width: 100%;min-height: 90vh;background: rgb(245,245,249);padding-top: 2upx;}
	.content .title{margin:100upx 0 60upx 0;font-size: 48upx;color:#262626;font-weight: bold;}
	.content .rows{width:90%;margin-left: 5%;padding:2%;border-radius: 20upx;background: white;margin-top: 40upx;}
	.content .rows .cover{width: 120upx;height:120upx;border-radius: 6upx;float: left;}
	.content .rows .centerBox{width: 40%;float: left;margin:0 2.5%}
	.content .rows .centerBox .name{width: 70%;font-size: 32upx;color:#262626;font-weight: bold;float: left;}
	.content .rows .centerBox .number{width: 30%;font-size: 24upx;color:#262626;float: right;}
	.content .rows .centerBox .rule{color:#262626;margin-top: 40upx;}
	.content .rows .rightBox{width: 35%;float: left;}
	.content .rows .rightBox .price{color:#DC582A;font-size: 32upx;text-align: right;}
	.content .rows .rightBox .priceBox{width: 100%;}
	.content .rows .rightBox .priceBox .vipIcon{width: 48upx;height:28upx;float: right;}
	.content .rows .rightBox .priceBox .vipPrice{color:#262626;font-size: 32upx;float: right;margin-left: 20upx;}
	.content .rows .rightBox .names{color:#DC582A;font-size: 22upx;text-align: right;}
	.content .rows .footerBox{width: 100%;padding-top: 20upx;margin-top: 20upx;border-top:2upx solid #DDDDDD;}
	.content .rows .footerBox .footerName{color:#262626;font-size: 24upx;text-align: right;font-weight: bold;float:right}
	.content .rows .footerBox .footerPrice{color:#262626;font-size: 36upx;text-align: right;font-weight: bold;float:right}
	.content .payBox{width: 100%;margin-top: 40px;}
	.content .payBox .bg_white{width: 90%;margin-left: 5%;padding:5%;background: white;border-radius:20upx;}
	.content .payBox .bg_white .titleA{width: 100%;font-size: 32upx;text-align: left !important;text-align: center;color:#262626;font-weight: bold;padding-bottom:20upx;border-bottom: 2upx solid #DDDDDD;}
	.content .payBox .bg_white .icon{width: 28upx;height: 28upx;position: absolute;top:2%;right:2%;z-index: 2;}
	.content .payBox .bg_white .rowsA{width: 100%;margin:40upx 0 0 0;}
	.content .payBox .bg_white .rowsA .useIcon{width: 54upx;height: 54upx;float: left;margin-left: 0%;}
	.content .payBox .bg_white .rowsA .name{float: left;height: 54upx;line-height:54upx;margin:0 20upx;font-weight: bold;}
	.content .payBox .bg_white .rowsA .names{float: left;height: 54upx;line-height:54upx;margin:0;color:#BBBBBB}
	.content .payBox .bg_white .rowsA .noneIcon{width: 32upx;height: 32upx;border:2upx solid grey;border-radius: 100upx;float: right;margin:20upx 5% 0 0}
	.content .payBox .bg_white .rowsA .thisOne{ width: 32upx;height: 32upx;float: right;margin:20upx 5% 0 0}/* border:2upx solid rgb(220,88,42); */
	.content .footer{width: 100%;padding:20upx;position: fixed;left:0;bottom: 0;z-index: 2;background-color: white;}
	.content .footer .name{color:#B3B3B3;float: left;}
	.content .footer .price{color:#DC582A;font-size: 48upx;float: left;margin-left: 20upx;}
	.content .footer .sureBtn{color:white;background:#DC582A;font-size: 32upx;float: right;padding: 10upx 50upx;border-radius: 100upx;}
</style>
<script>
	import Share from '@/common/wx_share.js'
	import jpPwd from '@/components/jp-pwd/jp-pwd.vue';
	export default {
		components: {
			jpPwd
		},
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				data:{
					cover:"",
					name:"",
					num:"",
					rule:"",
					price:"",
					vipPrice:"",
					less:"",
					allMoney:"",
					wallet_price:"",
					pwd:"",
					machineCode:"",
					model_id:"",
					goods_id:"",
					taste_id:"",
					num:"",
				},
				payWay:0,
				payWays:0,
				pwd: {
					money: 1,
					payType: 'one',
					keyType: 'one',
					pawType: 'one',
					tite: '请输入支付密码',
					cancelType: false,
					keep: false,
					msg: '',
					places: 6,
					isPwy: true
				},
				order_number:"",
				zf_type:"",
				
				
				
			}
		},
		onLoad(e){
			this.data.machineCode = e.machineCode
			this.data.model_id = e.model_id
			this.data.goods_id = e.goods_id
			this.data.taste_id = e.taste_id
			this.data.num = e.num
			this.AjaxLoad( e.machineCode,e.model_id,e.goods_id,e.taste_id,e.num )
		},
		methods: {
			AjaxLoad(machineCode,model_id,goods_id,taste_id,num){
				let param={
					token:this._$userToken("userInfo").token,
					machineCode:machineCode,
					model_id:model_id,
					goods_id:goods_id,
					taste_id:taste_id,
					num:num,
				};
				this._$InitRequest.request("coffee/buyInfo", param).then(res => {
					
					this.data.cover = res.data.goods_url
					this.data.name = res.data.goods_name
					this.data.num = res.data.num
					this.data.rule = res.data.goods_name
					this.data.price = res.data.price
					this.data.vipPrice = res.data.vip_price
					this.data.allMoney = res.data.total_price
					this.data.wallet_price = res.data.wallet.price
					
				},error=>{})
			},
			choosePayWay(e){this.payWay = e},
			choosePayWays(e){this.payWays = e},
			toOpen(payType, keyType, pawType) {
				this.pwd.isPwy = true
				this.pwd.payType = payType
				this.pwd.keyType = keyType
				this.pwd.pawType = pawType
				this.pwd.places = 6
				this.$refs.jpPwds.toOpen()
			},
			inputPwd(e) {this.pwd.msg = ''},
			completed(e) {
				this.data.pwd = e
				this.AjaxAddorder()
			},
			AjaxAddorder(){
				var that = this
				if( this.order_number ){
					this.AjaxPay()
				}else{
					let param={
						token:this._$userToken("userInfo").token,
						machineCode:this.data.machineCode,
						model_id:this.data.model_id,
						goods_id:this.data.goods_id,
						taste_id:this.data.taste_id,
						num:this.data.num,
						zf_type:this.payWay,
						type:this.payWays,
					};
					this._$InitRequest.request("coffee/order", param).then(res => {
						this.order_number = res.data.order_number
						// uni.showToast({icon:"none",title:res.mess})
						if( res.status == 200 ){
							this.AjaxPay()
						}
					},error=>{})
				}
			},
			AjaxPay(){
				var that = this
				let params={
					token:this._$userToken("userInfo").token,
					order_number:this.order_number,
					zf_type:this.payWay,
					pay_password:this.data.pwd,
				};
				this._$InitRequest.request("coffee/pay", params).then(resA => {
					if( resA.status !== 200 ){
						uni.showToast({icon:"none",title:resA.mess})
						that.$refs.jpPwds.toCancel()
						return;
					}else{
						uni.showToast({icon:"none",title:resA.mess})
						if( this.payWay == 1 ){
							uni.requestPayment({
							   provider: 'wxpay',
							   appId: resA.data.wxpayinfos.appId,
							   timeStamp: String(resA.data.wxpayinfos.timestamp),
							   nonceStr: resA.data.wxpayinfos.nonceStr,
							   package:"prepay_id="+resA.data.wxpayinfos.package,
							   signType: 'MD5',
							   paySign: resA.data.wxpayinfos.sign,
							    success: function (resB) {
									uni.showToast({icon:"success",title:"购买成功"})
									setTimeout(function(){
										uni.navigateTo({
											url:"/pages_kafei/pages/order/order"
										})
									},1500)
							    },
							    fail: function (err) {
							        console.log('fail:' + JSON.stringify(err));
							    }
							});
						}else if( this.payWay == 2 ){
							setTimeout(function(){
								uni.navigateTo({
									url:"/pages_mine/pages/pay_finish/pay_finish?num=" + resA.data.order_num
								})
							},1500)
						}
					}
				},error=>{})
			},
			btnSure(){
				if( this.payWay == 0 || this.payWays == 0 ){
					uni.showToast({icon:"none",title:"请选择方式"})
					return
				}else{
					if( this.payWay == 2 ){
						this.toOpen('two','one','two')
					}else if( this.payWay == 1 ){
						this.AjaxAddorder()
						// uni.navigateTo({
						// 	url:"/pages_kafei/pages/pay_finish/pay_finish"
						// })
					}
				}
				
			},
			
			
			
			
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .uni-input-input {font-size:32upx}
/deep/ .uni-radio-input-checked{background-color:rgb(110,43,34) !important;border:2upx solid white !important}
.content .html{
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>